<template>
  <!-- 左侧侧边栏区域 -->
  <el-aside width="200px" class="aside"> 
    <el-menu 
      default-active="1" 
      class="el-menu-vertical-demo" 
      text-color="#333" 
      active-text-color="#000" 
      background-color="transparent" 
    >
      <!-- 首页路由 -->
      <!--<el-menu-item index="1"> 
        <router-link to="/">首页</router-link>
      </el-menu-item>-->
      <el-menu-item index="2"> 
        <router-link to="/order">订单管理</router-link>
      </el-menu-item>
      <el-menu-item index="3"> 
        <router-link to="/product">商品管理</router-link>
      </el-menu-item>
      <!-- 用户管理路由 -->
      <el-menu-item index="4"> 
        <router-link to="/users">用户管理</router-link>
      </el-menu-item>
      <!-- 设置路由 -->
      <!--<el-menu-item index="5"> 
        <router-link to="/settings">设置</router-link>
      </el-menu-item>-->
    </el-menu>
  </el-aside>
</template>

<script setup>
// 无额外逻辑，保持空即可
</script>

<style scoped>
/* 侧边栏整体容器 */
.aside {
  background-color: #fff; /* 调整为白色背景，贴近设计 */
  border-right: 1px solid #e6e6e6; /* 加右侧分割线，更清晰 */
  display: flex;
  flex-direction: column; 
}

/* 侧边栏顶部标题 */
.sidebar-header {
  font-size: 18px;
  font-weight: bold;
  padding: 16px 20px; 
  color: #000; 
  border-bottom: 1px solid #e6e6e6; 
}

/* 菜单样式覆盖，去掉默认深色背景等，让文字、选中态更清爽 */
.el-menu-vertical-demo {
  border-right: none; 
}
.el-menu-item {
  padding-left: 20px !important; 
}
/* 路由链接文字样式统一 */
.el-menu-vertical-demo a {
  color: #333; 
  text-decoration: none; 
}
/* 选中项高亮，可根据需求微调背景色 */
.el-menu-item.is-active {
  background-color: #f8f9fa !important; 
  color: #000 !important; 
}
</style>